<template>
    <div class="articleList-page">
        <el-page-header @back="goBack" class="detail-page-header">
            <template #content>
                    <!-- 显示项目名称 -->
                    <span class="text-large font-600 mr-3"> {{ '文章列表' }} </span>
            </template>
            <!-- 如果需要，可以在 PageHeader 右侧添加额外内容或操作按钮 -->
        </el-page-header>
        <el-divider />
        <el-main class="detail-page-main mt-4" style="margin-top: 0 !important;padding-top: 0 !important;">
            <div class="detail-page-main-box " v-loading="pageInfo.loading">
                <div class="detail-page-main-box-btn">
                    <el-button type="info" @click="addArticle">
                        发布新文章
                    </el-button>
                </div>
                <div class="detail-page-main-box-table mt-4">
                    <el-table :data="articleList" size="large" border >
                        <el-table-column label="文章标题" prop="title" min-width="320" />
                        <!-- <el-table-column label="发布人" prop="name" min-width="120" /> -->
                        <el-table-column label="发布时间" prop="create_time" min-width="120" />
                        <el-table-column label="状态" prop="status" min-width="60" >
                            <template #default="{ row }">
                                <el-tag v-if="row.status == 1" type="success">已发布</el-tag>
                                <el-tag v-else type="danger">未发布</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="160">
                            <template #default="{ row }">
                                <el-button  link type="primary" @click="editArticle(row.id)">
                                    编辑
                                </el-button>
                                <el-button  type="primary" link @click="viewArticle(row.id)">
                                    查看
                                </el-button>
                                <el-button  type="danger" link @click="deleteArticle(row.id)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="flex justify-end mt-4">
                    <pagination v-model="pageInfo" @change="getArticleList" />
                </div>
            </div>
        </el-main>
    </div>
</template>
<script lang="ts" setup>
    import { defineEmits, ref, onMounted, defineProps, onActivated, toRaw } from 'vue'
    import { useRouter } from 'vue-router'
    const router = useRouter()
    import { apiMuArticleList, apiMuDelArticle } from '@/api/article'
    import { getRoutePath } from '@/router'
    import { usePaging } from '@/hooks/usePaging';
    import feedback from '@/utils/feedback'
    const props = defineProps({
        memorialId: {
            type: String || Number,
            default: ''
        }
    })
    const articleList = ref([])
    const pageInfo = ref({
        page: 1,
        size: 15,
        count: 0,
        loading: false
    })
    
    const emit = defineEmits<{
    (e: 'back-to-list', from: string): void;
    (e: 'to-article-edit', id: any, type: string): void;
    }>();

    const goBack = () => {
        emit('back-to-list', 'articleList');
    }

    

    // 切换内容，新增文章
    const addArticle = (id: any ) => {
        emit('to-article-edit', id, 'add');
    }
    const getArticleList = async () => {
        const data = await apiMuArticleList({mu_id: props.memorialId, ...pageInfo.value});
        articleList.value = data.list;
        pageInfo.value.count = data.total
    }

    const editArticle = (id: any) => {
        emit('to-article-edit', id, 'edit');
    }
    const viewArticle = (id: any) => {
        emit('to-article-edit', id, 'look');
    }

    const deleteArticle = async (id: any) => {
        await feedback.confirm('确定要删除？')
        await apiMuDelArticle({id: id, mu_id: props.memorialId});
        getArticleList()
    }
    onMounted(() => {
        getArticleList()
    })

</script>
<style scoped>

</style>